<template>
  <div class="Store-Choiceness">
    <book-banner :imgs="bannerList"></book-banner>
    <div style="background: #f7f7f7">
      <!-- 轮播下面的导航 -->
      <store-nav></store-nav>
      <!-- 高分神作 -->
      <exclusive :highWords="highWords"></exclusive>

      <!-- 男女畅销榜 -->
      <store-list :bookList="bookList"></store-list>
      <!-- 男生必看 -->
      <general-com-two :boyMustLooks="boyMustLooks"></general-com-two>
      <!-- 女生热门 -->
      <general-com-two :boyMustLooks="grilHot"></general-com-two>
      <!-- 悬疑推理 -->
      <!-- <general-com-three :suspense="suspense"></general-com-three> -->
      <!-- 底部分类 -->
      <store-classify :StoreClassify="StoreClassify"></store-classify>
    </div>

  </div>
</template>

<script>
import BookBanner from "../../views/BookBanner";
import StoreNav from "./StoreNav";
import exclusive from "../../views/exclusive";
import StoreList from "./StoreList";
import GeneralComTwo from "../../views/GeneralComTwo";
// import GeneralComThree from "../../views/GeneralComThree";
import StoreClassify from "./StoreClassify";

export default {
  data() {
    return {
      bannerList: [],
      highWords: [],
      bookList: [],
      boyMustLooks: [],
      grilHot: [],
      suspense: [],
      StoreClassify: [],
    };
  },
  components: {
    BookBanner,
    StoreNav,
    exclusive,
    StoreList,
    GeneralComTwo,
    // GeneralComThree,
    StoreClassify,
  },
  // beforeRouteEnter(to,from,next){
  //   next(vm=>{
  //     vm.$store.commit("toggleBottomNavShow", true);
  //   })
  // },
  created() {
    this.axios
      .get(
        "https://b.zhuishushenqi.com/category/group-minlist?node=e5fe6058afa449e4a8b9b3fb843c2bcd&sex=male&token=&userId=&cv=&groupid=&pl=null&type=jx&appType=&packageName="
      )
      .then((e) => {
        //轮播
        this.bannerList = e.data.data.spread[0].advs;
        //排行榜
        this.bookList = e.data.data.spread[3].advs;
        //高分神作
        this.highWords = e.data.data.nodes[1];
        //男生必看
        this.boyMustLooks = e.data.data.nodes[2];
        //女生热门
        this.grilHot = e.data.data.nodes[3];
        //悬疑
        // this.suspense = e.data.data.nodes[4];
        //底部分类
        this.StoreClassify = e.data.data.spread[4].advs;

        // console.log(e.data.data.spread[3].advs);
        //进来的时候获取背景色
        // this.$store.commit(
        //   "changenavbg",
        //   e.data.data.spread[0].advs[0].navBgColor
        // );
      });

    // this.axios
    // .get(
    //     'http://b02.zhuishushenqi.com/category/native-page?node=72b04c43ab40499b84a2ffb79bf51398&pl=android&sex=female&cv=%E7%8E%84%E5%B9%BB&groupid=2%2C53%2C190%2C1021%2C2013&bookid=55eef8b27445ad27755670b9%2C585d06030203c5d5138a4d9a&packageName=com.ushaqi.zhuishushenqi&token=qbQ6bjrqeoQWMR17cc8715573cf05c00dff343b414cfed9275ce7ea56135ed40601a83580c0c9ed5205173314bd547e853d91d44d4f76be69bc66d2ef9fea609df3e7ffef4ed163befa7029da60c6e9bf006b617b97ba480&ishome=true&page=1&userid=58d13220bc6ba327149af45e&city=%E5%B9%BF%E5%B7%9E&time=1608009607470'
    // )
    // .then((e) => {
    //     console.log(e.data.book);
    // });
  },
};
</script>

<style lang="less">
.Store-Choiceness {
  .footer {
    margin-top: 20px;
    padding: 0 16px;
    padding-bottom: 50px;
    text-align: center;
    h1 {
      display: flex;
      justify-content: center;
      align-items: center;
          color: #858383;
      span{
        flex: 1;
      }
      .line {
        flex-basis: 15%;
        width: 15%;
        height: 1px;
      }
    }
    .btns{
      padding: 15px 0;
      button{
        border-radius: 20px;
        background: rgba(235, 5, 5,.1);
        color: rgb(235, 5, 5);
        padding: 7px 15px;
        margin: 0 5px;
        font-weight: bolder;
      }
    }
  }
  // padding: 0 16px;
  // background:#F7F7F7;
  // color: @color;

  // overflow: hidden;
  // .list {
  //   overflow: hidden;

  //   display: block;
  //   overflow-x: auto;
  //   white-space: nowrap;
  //   width: 100%;
  //   display: flex;
  // }
}
</style>